<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script lang="ts" name="App" setup>
import { useGlobalStore } from '@/store/global';

const counterStore = useGlobalStore();
const router = reactive(useRouter());

const watchRouter = watch(router, () => {
  document.title =
    ((router.currentRoute.meta.title as ComputedRef<string | null>)
      .value as string) || 'Page is missing title';
  watchRouter();
});

let assetTag = computed(() => counterStore.assetTag);

watch(
  () => router.currentRoute,
  (to) => {
    document.title =
      ((router.currentRoute.meta.title as ComputedRef<string | null>)
        .value as string) || 'Page is missing title';
    if (assetTag.value) {
      document.title = `${assetTag.value} - ${(to.meta.title as ComputedRef<string | null>).value}`;
    }
  },
);

watch(assetTag, (tag) => {
  if (tag) {
    document.title = `${tag} - ${(router.currentRoute.meta.title as ComputedRef<string | null>).value}`;
  }
});
</script>
